<template>
  <div class="container">
    <div class="top-nav">
      <div class="top-nav-list" :class="{ active: navActiveValue === item.value }" v-for="item in goodsNavData"
           :key="item.value"
           @click="activateNavItem(item.value)">
        {{ item.title }}
      </div>
    </div>
    <div class="goods-type" v-if="!props.rowData.id && navActiveValue === 1">
      <div class="good-type-list" :class="{active: currGoodType===index}" v-for="(item,index) in goodsType" :key="index"
           @click="activateTypeItem(index)">
        <div class="title">
          {{ item.title }}
        </div>
        <div class="sub-title">
          {{ item.subTitle }}
        </div>
      </div>
    </div>
    <div class="input-title" v-if="navActiveValue===1">
      <span class="input-line"></span>
      <span class="min-title"> 基本信息</span>
    </div>
    <div class="form-base" >
      <!-- 基本信息 -->
      <el-form label-width="120px" v-model="form" v-if="navActiveValue===1">
        <el-form-item label="商品名称:">
          <el-input class="yl-w-400 yl-h-40" v-model="form.name" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="推广词:">
          <el-input v-model="form.subName" type="textarea" rows="2" style="width: 500px" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品图片:" prop="ossId">
          <image-upload v-model="form.ossId" class="custom-upload" />
        </el-form-item>
        <el-form-item :label="'平台价格'" prop="price">
          <el-input type="number" v-model="form.price">
            <template #suffix>￥</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="'市场价格'" prop="oldPrice">
          <el-input type="number" v-model="form.oldPrice">
            <template #suffix>￥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品详情:" prop="details">
          <editor v-model="form.details.content" :min-height="200" />
        </el-form-item>
      </el-form>
      <!-- sku信息-->
      <el-form v-if="navActiveValue===2">
        <el-button>添加规格</el-button>
      </el-form>
    </div>
    <div class="yl-btn-group">
      <el-button type="success" size="large">保存</el-button>
      <el-button type="primary" size="large">下一步</el-button>
    </div>

  </div>
</template>
<script setup lang="ts">
import { goodsNavData, goodsType } from '@/views/mall/mallGoods/config';
import { MallGoodsForm, MallGoodsQuery } from '@/api/mall/mallGoods/types';
import SkuItem from '@/views/mall/mallGoods/components/SkuItem.vue';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => {
    }
  }
});

// 跟踪当前激活的导航项值
const navActiveValue = ref(1);
const currGoodType = ref(0);


/*激活导航项*/
function activateNavItem(value: number) {
  console.log(value);
  navActiveValue.value = value;
}

/*激活商品类型*/
function activateTypeItem(value: number) {
  currGoodType.value = value;
}

const initFormData: MallGoodsForm = {
  id: undefined,
  brandId: undefined,
  cate1Id: undefined,
  cate2Id: undefined,
  cate3Id: undefined,
  name: undefined,
  subName: undefined,
  price: undefined,
  oldPrice: undefined,
  imgUrl: undefined,
  ossId: undefined,
  sale: undefined,
  collect: undefined,
  status: 0,
  verify: undefined,
  refuseInfo: undefined,
  freightId: undefined,
  contentMobile: undefined,
  isRecommend: undefined,
  isMaster: undefined,
  specs: [],
  skus: [{}],
  details: {}
};
const data = reactive<PageData<MallGoodsForm, MallGoodsQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    params: {},
    cateId: undefined
  },
  rules: {
    id: [{ required: true, message: '不能为空', trigger: 'blur' }],
    cate3Id: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }],
    name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
    price: [{ required: true, message: '销售量不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '上架状态不能为空', trigger: 'change' }],
    details: [{ required: true, message: '详情不能为空', trigger: 'change' }]
  }
});
const { queryParams, form, rules } = toRefs(data);

watch(
  () => props.rowData,
  () => {
    console.log(props.rowData);
    form.value = props.rowData as any;
    queryParams.value.cateId = props.rowData.cateId;
    // 品牌可编辑
    // isDisabled.value = false;
    // 参数
    queryParams.value.cateId = props.rowData.cate3Id;
    //复选框选中状态
    // selectedSpecIds.value = form.value.specValue.map((item) => item.specId);

  }
);
</script>
<style scoped lang="scss">
body {
  background: #f5f5f5;
}

.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #fff;

  .top-nav {
    width: 100%;
    height: 40px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: start;

    .top-nav-list {
      width: 120px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-right: 1px solid #e6e6e6;
      cursor: pointer;

      &:hover {
        background: #ffb300;
      }

      &:last-child {
        border-right: none;
      }

      &.active {
        background: #ffb300;
      }
    }
  }

  .goods-type {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;

    .good-type-list {
      width: 140px;
      height: 100px;
      border: 1px solid #e6e6e6;
      margin: 10px;
      //padding: 10px;
      padding-top: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;

      &:hover {
        border: 1px solid #ffb300;
        cursor: pointer;
      }

      &.active {
        border: 1px solid #ffb300;
      }
    }

    .title {
      font-size: 18px;
      color: #333333;
      margin-bottom: 10px;
    }
  }

  .form-base {
    width: 100%;
    padding: 20px 100px;
    margin-top: 15px;
    margin-bottom: 60px;

    .el-input {
      width: 500px;
    }
  }
}
</style>
